<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css" />
    <link rel="stylesheet" href="../css/detail.css" />
    <link rel="stylesheet" href="../css/swiper-bundle.min.css" />
  </head>
  <body>
    <header class="site-header"></header>
    <div class="home">
      <ul>
        <li>首页</li>
      </ul>
    </div>
    <main></main>

    <div class="container1"></div>
    <footer class="site-footer"></footer>

    <script
      src="../libs/requirejs/require.js"
      data-main="../js/detail"
    ></script>
    <script src="../libs/swiper/swiper-bundle.min.js"></script>

    <script type="text/html" id="temp">
      <div class="info">
        <div class="goods">
          <div class="goods-left">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                {{each products.detail.photo val}}
                <div class="swiper-slide"><img src="{{val.url}}" /></div>
                {{/each}}
              </div>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          </div>

          <div class="goods-content">
            <h2>
              <img src="img/tianmao.png" alt="" />
              <img src="img/baoyou.png" alt="" />
              <span class="title">{{products.share.title}}</span>
              <label>{{products.detail.id}}</label>
            </h2>
            <div class="price">
              <p>原价¥{{products.detail.originPrice}}</p>
              <div>
                <span>券后价:</span>
                <span><i>¥</i> <b>{{products.detail.price}}</b></span>
                <span>{{products.detail.couponValue}}</span>
                <span>{{products.detail.saleNum}}人已买</span>
              </div>
            </div>
            <p class="time">优惠有效期：{{products.detail.expireDate}}</p>
          </div>
        </div>
        <div class="info-right">
          <div class="info-right-top">
            <span class="line"></span>
            <span class="tet">卖家信息</span>
            <span class="line"></span>
          </div>

          <img src="{{products.shop.coverUrl}}" alt="" />
          <p>{{products.shop.nickname}}</p>
          <ul class="item">
            <li>描述</li>
            <li>服务</li>
            <li>物流</li>
          </ul>
          <ul class="score">
            <li>{{products.shop.itemScore}}</li>
            <li>{{products.shop.deliveryScore}}</li>
            <li>{{products.shop.serviceScore}}</li>
          </ul>
        </div>
      </div>
    </script>

    <script type="text/html" id="temp1">
      {{each products.detail.photo val}}
      <img src="{{val.url}}" alt="" />
      {{/each}}
    </script>
    <script>
      var swiper = new Swiper(".swiper-container", {
        cssMode: true,
        // autoplay: true,
        autoplay: {
          pauseOnMouseEnter: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        mousewheel: true,
        keyboard: true,
        loop: true,
      });
    </script>
  </body>
</html>
